<!DOCTYPE html>
<html>

<head>
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <title>昕姿微门户后管理系统</title>
  <meta name="keywords" content="Bootstrap 3 Admin Dashboard Template Theme" />
  <meta name="description" content="AdminDesigns - Bootstrap 3 Admin Dashboard Theme">
  <meta name="author" content="AdminDesigns">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Vendor CSS -->
  <link rel="stylesheet" type="text/css" href="theme/vendor/plugins/magnific/magnific-popup.css">
  <!-- Font CSS (Via CDN) -->
  <link rel='stylesheet' type='text/css' href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700'>
  <!-- FullCalendar Plugin CSS -->
  <link rel="stylesheet" type="text/css" href="theme/vendor/plugins/fullcalendar/fullcalendar.min.css">
  <!-- Theme CSS -->
  <link rel="stylesheet" type="text/css" href="theme/assets/skin/default_skin/css/theme.css">
  <!-- Admin Forms CSS -->
  <link rel="stylesheet" type="text/css" href="theme/assets/admin-tools/admin-forms/css/admin-forms.min.css">
  <!-- Datatables CSS -->
  <link rel="stylesheet" type="text/css" href="theme/vendor/plugins/datatables/media/css/dataTables.bootstrap.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

</head>

<body class="dashboard-page">
  <div id="main">
    <header class="navbar navbar-fixed-top navbar-shadow" id="topuser"></header>
    <aside id="sidebar_left" class="nano nano-light affix"></aside>
    <!-- End: Sidebar Left -->

    <!-- Start: Content-Wrapper -->
    <section id="content_wrapper">
    	<div class="tray tray-center" style="margin: 20px;">
		<div class="panel panel-visible " id="spy1" style="padding-bottom: 20px;">
             <div class="panel-heading">
               <div class="panel-title hidden-xs">
               	<span>
                 <span class="glyphicon glyphicon-tasks"></span><b> 预约记录管理</b>
                 </span>
               </div>
             </div>
             <div class="tray tray-center" style="margin: 20px;">
             <div class="panel panel-visible " id="spy1">
             <form class="form-horizontal" role="form">
                  <div class="form-group">
                    <label for="inputStandard" class="col-lg-1 control-label">姓名</label>
                    <div class="col-lg-2">
                      <div class="bs-component">
                        <input type="text" id="inputStandard" class="form-control">
                      </div>
                      </div>
                    <label for="inputStandard" class="col-lg-1 control-label">性别</label>
                    <div class="col-lg-2">
                      <div class="bs-component">
                        <div class="bs-component">
                        <select class="form-control">
                          <option>全部</option>
                          <option>男</option>
                          <option>女</option>
                          <option>未知</option>
                        </select>
                      </div>
                      </div>
                    </div>
                    <label for="inputStandard" class="col-lg-1 control-label">手机号码</label>
                    <div class="col-lg-2">
                      <div class="bs-component">
                        <div class="bs-component">
                          <input type="text" id="inputStandard" class="form-control">
                      </div>
                      </div>
                    </div>
                    <label for="inputStandard" class="col-lg-1 control-label">是否节假日</label>
                    <div class="col-lg-2">
                      <div class="bs-component">
                        <div class="bs-component">
                        <select class="form-control">
                          <option>全部</option>
                          <option>是</option>
                          <option>否</option>
                        </select>
                      </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputStandard" class="col-lg-1 control-label">预约日期</label>
                    <div class="col-lg-2">
                      <div class="admin-form mw1000 center-block">
                        <label for="datepicker1" class="field prepend-icon">
                          <input type="text" id="datepicker1" name="datepicker1" class="gui-input" placeholder="请选择预约日期起">
                          <label class="field-icon">
                            <i class="fa fa-calendar-o"></i>
                          </label>
                        </label>
                      </div>
                    </div>
                    <label for="inputStandard" class="col-lg-1 control-label">预约日期</label>
                    <div class="col-lg-2">
                      <div class="admin-form mw1000 center-block">
                        <label for="datepicker2" class="field prepend-icon">
                          <input type="text" id="datepicker2" name="datepicker2" class="gui-input" placeholder="请选择预约日期止">
                          <label class="field-icon">
                            <i class="fa fa-calendar-o"></i>
                          </label>
                        </label>
                      </div>
                    </div>
                    <label for="inputStandard" class="col-lg-1 control-label">记录日期</label>
                    <div class="col-lg-2">
                      <div class="admin-form mw1000 center-block">
                        <label for="datepicker1" class="field prepend-icon">
                          <input type="text" id="datepicker1" name="datepicker1" class="gui-input" placeholder="请选择记录日期起">
                          <label class="field-icon">
                            <i class="fa fa-calendar-o"></i>
                          </label>
                        </label>
                      </div>
                    </div>
                    <label for="inputStandard" class="col-lg-1 control-label">记录日期</label>
                    <div class="col-lg-2">
                      <div class="admin-form mw1000 center-block">
                        <label for="datepicker1" class="field prepend-icon">
                          <input type="text" id="datepicker1" name="datepicker1" class="gui-input" placeholder="请选择记录日期起">
                          <label class="field-icon">
                            <i class="fa fa-calendar-o"></i>
                          </label>
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-lg-1" style="float: right;"s>
                      <div class="bs-component">
                        <button type="button" class="btn btn-success btn-block">查询</button>
                      </div>
                    </div>
                  </div>
                </form>
        </div>
             <div class="panel-body pn">
               <table class="table table-striped table-hover" id="datatable" cellspacing="0" width="100%">
                 <thead>
                   <tr>
                     <th>序号</th>
                     <th>姓名</th>
                     <th>手机号码</th>
                     <th>所属门店</th>
                     <th>预约日期</th>
                     <th>预约时间</th>
                     <th>录入人</th>
                     <th>录入时间</th>
                     <th>操作</th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr>
                     <td>1</td>
                     <td>张三</td>
                     <td>19323232343</td>
                     <td>门店一</td>
                     <td>1991-02-08</td>
                     <td>15:42</td>
                     <td>溜溜</td>
                     <td>1991-02-08 13:43</td>
                     <td><a href="#modal-form" id="xiugai" data-effect="mfp-zoomIn">修改</a> | 
                     	<a href="####" onclick="deleteuser('1001')">删除</a>
                   </tr>
                   <tr>
                   	 <td>2</td>
                     <td>李四</td>
                     <td>18819292929</td>
                     <td>门店二</td>
                     <td>1991-02-08</td>
                     <td>15:42</td>
                     <td>溜溜</td>
                     <td>1991-02-08 13:43</td>
                     <td>修改 | 删除</td>
                   </tr>
                   <tr>
                   	 <td>3</td>
                     <td>王五</td>
                     <td>17738328833</td>
                     <td>门店二</td>
                     <td>1991-02-08</td>
                     <td>15:42</td>
                     <td>溜溜</td>
                     <td>1991-02-08 13:43</td>
                     <td>修改 | 删除</td>
                   </tr>
                 </tbody>
               </table>
             </div>
           </div>
           </div>
        </div>
    </section>
    <!-- End: Content-Wrapper -->
  </div>
  <!-- End: Main -->
	<!-- Admin Form Popup -->
        <div id="modal-form" style="width: auto;max-width: 700px;" class="popup-basic admin-form mfp-with-anim mfp-hide">
          <div class="panel" >
            <div class="panel-heading">
              <span class="panel-title">
                <i class="fa fa-user"></i>张三 的预约信息维护</span>
            </div>
            <!-- end .panel-heading section -->
            <form method="post" action="/" id="comment" class="form-horizontal" role="form">
              <div class="panel-body p25">
                <div class="section row">
                  <div class="form-group">
                    <label for="inputStandard" class="col-lg-2 control-label">所属门店</label>
                    <div class="col-lg-3">
                      <div class="bs-component">
                        <select class="form-control">
                          <option>门店一</option>
                          <option>门店二</option>
                          <option>门店三</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <!-- end section -->
                </div>
                <div class="section row">
                  <div class="form-group">
                    <label for="inputStandard" class="col-lg-2 control-label">预约日期</label>
                    <div class="col-lg-3">
                      <div class="bs-component">
                        <div class="admin-form mw1000 center-block">
                        <div class="section">
                        <label for="datepicker1" class="field prepend-icon">
                          <input type="text" id="datepicker1" name="datepicker1" class="gui-input" placeholder="请选择...">
                          <label class="field-icon">
                            <i class="fa fa-calendar-o"></i>
                          </label>
                        </label>
                      </div>
                      </div>
                      </div>
                    </div>
                    <label for="inputStandard" class="col-lg-2 control-label">预约时间</label>
                    <div class="col-lg-3">
                      <div class="bs-component">
                         <div class="admin-form mw1000 center-block">
                        <div class="section">
                        <label for="datepicker1" class="field prepend-icon">
                          <input type="text" id="timepicker1" name="timepicker1" class="gui-input hasDatepicker" placeholder="Timepicker Popup">
                          <label class="field-icon">
                            <i class="fa fa-clock-o"></i>
                          </label>
                        </label>
                      </div>
                      </div>
                      </div>
                    </div>
                  </div>
                  <!-- end section -->
                </div>
                <!-- end section -->
              </div>
              <!-- end .form-body section -->

              <div class="panel-footer" style="text-align: right">
                <button type="submit" class="button btn-primary">确 定</button>
              </div>
              <!-- end .form-footer section -->
            </form>
          </div>
          <!-- end: .panel -->
        </div>
  <!-- jQuery -->
  <script src="theme/vendor/jquery/jquery-1.11.1.min.js"></script>
  <script src="theme/vendor/jquery/jquery_ui/jquery-ui.min.js"></script>
  <<!-- Datatables -->
  <script src="theme/vendor/plugins/datatables/media/js/jquery.dataTables.js"></script>
  <!-- Datatables Tabletools addon -->
  <script src="theme/vendor/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
  <!-- Datatables ColReorder addon -->
  <script src="theme/vendor/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
  <!-- Datatables Bootstrap Modifications  -->
  <script src="theme/vendor/plugins/datatables/media/js/dataTables.bootstrap.js"></script>

  <!-- Theme Javascript -->
  <script src="theme/assets/js/utility/utility.js"></script>
  <script src="theme/assets/js/demo/demo.js"></script>
  <script src="theme/assets/js/main.js"></script>
  <script src="javascript/index.js"></script>

  <!-- Page Plugins -->
  <script src="theme/vendor/plugins/magnific/jquery.magnific-popup.js"></script>
  <script src="theme/assets/admin-tools/admin-forms/js/jquery-ui-datepicker.min.js"></script>
  <!-- 个人自己的  Javascript -->
  <script src="javascript/comm.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function() {
    "use strict";
    // Init Demo JS  
    Demo.init();
    // Init Theme Core    
    Core.init();

    $('#datatable').dataTable({
        "aoColumnDefs": [{
          'bSortable': true,
          'aTargets': [-1]
        }],
        "oLanguage": {
            "sLengthMenu": "_MENU_ records",
            "sProcessing" : "正在加载数据，请稍后...", //设置进度条显示文本
            "oPaginate": {
                "sPrevious": "上一页",
                "sNext": "下一页"
            },
           "sSearch":"搜索:",
           "sLengthMenu": "每页显示 _MENU_ 条记录",
           "sInfo": "显示 _START_ 至 _END_ 总共 _TOTAL_ 条记录",
           "sInfoEmpty": "没有记录",
           "sInfoFiltered": "(总共 _MAX_ 条记录)",
           "sZeroRecords": "没有匹配的数据记录"
        },
        "iDisplayLength": 5,
        "aLengthMenu": [
          [5, 10, 25, 50, -1],
          [5, 10, 25, 50, "All"]
        ],
        "sDom": '<"dt-panelmenu clearfix"lfr>t<"dt-panelfooter clearfix"ip>',
        "oTableTools": {
          "sSwfPath": "theme/vendor/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
        }
      });

    var modalContent = $('#modal-content');

    modalContent.on('click', '.holder-style', function(e) {
      e.preventDefault();

      modalContent.find('.holder-style').removeClass('holder-active');
      $(this).addClass('holder-active');
    });

    // Form Skin Switcher
    $('#xiugai').on('click', function() {
      $(this).addClass('active-animation item-checked');
      $.magnificPopup.open({
        removalDelay: 500, //delay removal by X to allow out-animation,
        items: {
          src: '#modal-form'
        },
        // overflowY: 'hidden', // 
        callbacks: {
          beforeOpen: function(e) {
            var Animation = $("#spy1").find('.active-animation').attr('data-effect');
            this.st.mainClass = Animation;
          }
        },
        midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
      });
    });

    $('#xinzeng').on('click', function() {
        $(this).addClass('active-animation item-checked');
        $.magnificPopup.open({
          removalDelay: 500, //delay removal by X to allow out-animation,
          items: {
            src: '#modal-form'
          },
          // overflowY: 'hidden', // 
          callbacks: {
            beforeOpen: function(e) {
              var Animation = $("#spy1").find('.active-animation').attr('data-effect');
              this.st.mainClass = Animation;
            }
          },
          midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
        });
      });
  });

  $("#datepicker1").datepicker({
      prevText: '<i class="fa fa-chevron-left"></i>',
      nextText: '<i class="fa fa-chevron-right"></i>',
      showButtonPanel: false,
      beforeShow: function(input, inst) {
        var newclass = 'admin-form';
        var themeClass = $(this).parents('.admin-form').attr('class');
        var smartpikr = inst.dpDiv.parent();
        if (!smartpikr.hasClass(themeClass)) {
          inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
        }
      }
    });

  $("#datepicker2").datepicker({
      prevText: '<i class="fa fa-chevron-left"></i>',
      nextText: '<i class="fa fa-chevron-right"></i>',
      showButtonPanel: false,
      beforeShow: function(input, inst) {
        var newclass = 'admin-form';
        var themeClass = $(this).parents('.admin-form').attr('class');
        var smartpikr = inst.dpDiv.parent();
        if (!smartpikr.hasClass(themeClass)) {
          inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
        }
      }
    });

  $("#datepicker4").datepicker({
      prevText: '<i class="fa fa-chevron-left"></i>',
      nextText: '<i class="fa fa-chevron-right"></i>',
      showButtonPanel: false,
      beforeShow: function(input, inst) {
        var newclass = 'admin-form';
        var themeClass = $(this).parents('.admin-form').attr('class');
        var smartpikr = inst.dpDiv.parent();
        if (!smartpikr.hasClass(themeClass)) {
          inst.dpDiv.wrap('<div class="' + themeClass + '"></div>');
        }
      }
    });
  </script>
  <!-- END: PAGE SCRIPTS -->

</body>

</html>
